<template>
	<div class="main">
		<div class="movie-detail">
			<div class="movie-filter"></div>
			<div class="poster-bg" :style="{background: bgImg}"></div>
			<div class="detail">
				<div class="poster">
					<img v-if="detailMovie" :src="_repic(detailMovie.img)" alt="">
				</div>
				<div class="movie-content">
					<div class="title">{{detailMovie.nm}}</div>
					<div class="title-en-name">{{detailMovie.enm}}</div>
					<div class="score">{{detailMovie.sc}} <span>{{detailMovie.snum}}人评</span></div>
					<div class="cat">{{detailMovie.cat}}</div>
					<div class="src">{{detailMovie.src}}/{{detailMovie.dur}}分钟</div>
					<div class="pub-desc">{{detailMovie.pubDesc}}</div>
				</div>
			</div>
			<div class="arrow-g">
				<img src="" alt="">
			</div>
		</div>
		<div class="time-wrap" >
			<div class="time"
				 v-for="(item,index) in showDays" 
				 :key="index"
				 @click="_getClick(index)"
				 >
				 {{item.date}}
			</div>
		</div>
		<TabItem></TabItem>
		<CinemaCity :cinemas="item" v-for="(item,index) in cinemas" :key="index"></CinemaCity>
	</div>
</template>

<script>
import api from '../config/api.js';
import TabItem from '../components/TabItem.vue';
import CinemaCity from '../components/CinemaCity.vue';

export default {
	components:{
		TabItem,
		CinemaCity
	},
	data(){
		return {
			detailMovie:'',
			bgImg: '',
			cinemas:'',
			showDays: '',
			page: 0,
			limit: 20,
			date: '',
			timeIndex: ''
		}
	},
	methods:{
		_repic(img){
			return img.replace(/w.h/,'110.150');
		},
		_getDetailMovie(){
			var movieId = this.$route.params.id;
			this.$axios({
				url: api.detailMovie,
				params:{
					movieId: movieId
				}
			}).then((res)=>{
				var bgImg;
				
				this.detailMovie = res.data.detailMovie;
				bgImg = this._repic(this.detailMovie.img);
				this.bgImg = 'url'+'('+ bgImg +')';
			})
		},
		// 封装电影列表请求
		_sendMovieRequest(){
			return new Promise((resolve,reject) => {
				var d= {
					movieId: this.$route.params.id,
				    day: this.date,
				    offset: this.page,
				    limit: this.limit,
				    districtId: -1,
				    lineId: -1,
				    hallType: -1,
				    brandId: -1,
				    serviceId: -1,
				    areaId: -1,
				    stationId: -1,
				    item: "",
				    updateShowDay: true,
				    reqId: Date.now(),
				    cityId: 20
				};
				
				var dd = new URLSearchParams();
				for(let k in d){
					dd.append(k,d[k])
				}
				this.$axios({
					method: 'post',
					url: api.movie+'?forceUpdata='+Date.now(),
					data:dd
				}).then((res)=>{
					resolve(res)
				})
			})
		},
		// 获取电影院
		_getMovie(){
			var date = new Date();
			this.date = date.getFullYear() + '-' + (date.getMonth()+1) + '-' + date.getDate();
			
			this._sendMovieRequest().then((res) => {
				this.cinemas = res.data.cinemas;
				this.showDays = res.data.showDays.dates
			})
		},
		// 获取更多电影院
		_getMostMovie(){
			document.addEventListener('scroll',(e)=>{
				var scrollHeight = e.target.body.scrollHeight;
				var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
				var clientHeight = e.target.body.clientHeight;
				var d = scrollHeight - scrollTop == clientHeight;
				
				if(d){
					this.page += this.limit;
					this._sendMovieRequest().then((res) => {
						this.cinemas.push(...res.data.cinemas);
					});
				}
			})
		},
		// 点击日期，获取相应电影院
		_getClick(index){
			console.log(this.showDays[index].date)
			this.date = this.showDays[index].date;
			this._sendMovieRequest().then((res) => {
				this.cinemas = res.data.cinemas;
			});
		}
	},
	created() {
		this._getDetailMovie();
		this._getMovie();
	},
	mounted() {
		this._getMostMovie();
	}
}
</script>

<style lang="scss" scoped>
@mixin line-ellipsis {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
@mixin detail {
	margin-top: 10px;
	font-size: 12px;
	color: #fff;
	opacity: .8;
}

.movie-detail{
	height: 188px;
	position: relative;
	overflow: hidden;
	.detail{
		display: flex;
		width: 100%;
		height: 100%;
		padding: 19px 30px 19px 15px;
	}
}
.time-wrap{
	white-space: nowrap;
	overflow: auto;
	&::-webkit-scrollbar {
		display: none;
	}
	.time{
		display: inline-block;
		width: 115px;
		height: 45px;
		text-align: center;
		line-height: 45px;
		font-size: 14px;
		color: #666;
	}
}
.movie-filter{
	width: 100%;
	height: 100%;
	background-color: #333;
	position: absolute;
	z-index: -1;
}
.poster-bg{
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: absolute;
	z-index: -1;
	background-repeat: no-repeat !important;
	background-size: cover !important;
	opacity: .55;
	-webkit-filter: blur(1.2rem);
	filter: blur(1.2rem);
}
.poster{
	width: 110px;
	height: 150px;
	img{
		display: block;
		width: 110px;
		height: 150px;
	}
}
.movie-content{
	margin-left: 12px;
	color: #fff;
	line-height: 1;
	.title{
		font-size: 20px;
		font-weight: 700;
		margin-top: 5px;
		@include line-ellipsis;
	}
	.title-en-name{
		@include detail;
		@include line-ellipsis;
	}
	.score{
		font-size: 18px;
		font-weight: 700;
		color: #fc0;
		margin-top: 11px;
		@include line-ellipsis;
		span{
			@include detail;
		}
	}
	.cat{
		@include detail;
		@include line-ellipsis;
	}
	.src{
		@include detail;
		@include line-ellipsis;
	}
	.pub-desc{
		@include detail;
		@include line-ellipsis;
	}
}
.arrow-g{
	width: 10px;
	position: absolute;
	top: 50%;
	right: 15px;
	transform: translateY(-50%);
	img{
		display: block;
		width: 100%;
	}
}
</style>
